<template>
	<view>
		<b-navigator :active-index="activeIndex"></b-navigator>
		<!-- 主体部分 -->
		<view class="main">
			<!-- 阅读部分 -->
			<view class="news-content-wrap">
				<view class="news-title-wrap">
					<view class="news-title">{{ detail.title }}</view>
					<view class="news-data">
						<text class="data-item">{{ detail.createTime }}</text>
						<text class="data-item">{{ detail.createBy }}</text>
						<text class="data-item">{{ detail.read_num }}次阅读</text>
					</view>
				</view>
				<view class="news-content">  <div v-html="detail.content"></div></view>
			</view>
	
		</view>
		<b-header></b-header>
		
	</view>
</template>

<script>
	import bNavigator from '../../components/b-navigator.vue'
	import bFooter from '../../components/b-footer.vue'
	import { noticeList, noticeDetail } from '../../config/api';
	import { random } from '@/uni_modules/uview-plus';
	export default {
		components: { bNavigator, bFooter },
		data() {
			return {
				activeIndex: '/pages/oldservice/index',
				detail: {},
			}
		},
		onLoad() {
			this.getNewDetail()
		},
		methods: {
			getNewDetail() {
				noticeDetail(this.$route.query.id).then(res => {
					this.detail = res.data
					this.detail.content = this.detail.content
						.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/gi, '<p')
						.replace(/<p>/gi, '<p style="font-size: 15px; line-height: 25px;">')
						.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/gi, '<img$1')
						.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/gi, '<img$1')
						.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/gi, '<img$1')
						.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/gi, '<img$1')
						.replace(/<img([\s\w"-=\/\.:;]+)/gi, '<img style="max-width: 100%;" $1');
					this.detail.read_num = random(15,85)
					this.detail.content = this.imageUrlHander(this.detail.content)	
				})
			},
			imageUrlHander(content){
				//富文本内容（后台返回图片路径不正确）
			      var reg = /<img [^>]*src=['"]([^'"]+)[^>]*>/g; //img 标签取src里面内容的正则
			      var srcArr = content.match(reg);//取到所有img标签放到数组中
			      if(srcArr.length){
			          for (let i = 0; i < srcArr.length; i++) {
			          var srcImg = srcArr[i].replace(reg, '$1');
					  var http = srcImg.slice(0,4)
			          var url = srcImg.slice(1);
			          var newImg = srcArr[i].replace(srcImg, 'http://localhost:81/' + url);
			          content = http === 'http'? content: content.replace(srcArr[i],newImg);
			          }        
			       }
			       // console.log(content)
			       return content;
			  },
		}
	}
</script>

<style>
.news-content-wrap {
	font-size: 16px;
	border-radius: 4px;
	padding: 15px;
	width: 100%;
	color: #262626;
	background-color: #ffffff;
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);

	.news-title-wrap {
		padding-bottom: 30rpx;
		margin-bottom: 20rpx;
		text-align: center;
		border-bottom: 1px solid $uni-border-color;

		.news-title {
			font-size: 22px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.news-data {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.data-item {
				font-size: 14px;
				color: #888888;
				margin-right: 20rpx;
			}
		}
	}

	.news-content {
		padding: 0 20px;
		uni-rich-text img {
			max-width: 100% !important;
		}
	}
}

.hot-news {
	font-size: 16px;
	border-radius: 4px;
	padding: 15px;
	width: 28%;
	color: #262626;
	background-color: #ffffff;
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);

	.hot-news-title {
		font-weight: bold;
		padding: 10px 0 20px;
		margin-bottom: 10px;
		font-size: 18px;
		border-bottom: 1px solid $uni-border-color;
	}

	.hot-news-list {
		color: #888888;

		.hot-news-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 0;
			margin-bottom: 10px;
			font-size: 14px;

			.news-title {
				width: 80%;
				max-width: 240px;
			}

			&:last-child {
				padding-bottom: 0;
			}

			&:hover {
				color: #ea6101;
			}
		}
	}
}

@media screen and (max-width: 960px) {
	.main {
		flex-direction: column;
		width: 86%
	}

	.news-content-wrap {
		width: 100%;
		margin-bottom: 20rpx;

		.news-title-wrap {
			.news-title {
				font-size: 36rpx;
			}
		}

		.news-content {
			padding: 0;
		}
	}

	.hot-news {
		width: 100%;
	}
}
</style>
